<template>
  <div class="cardreader-list">
    <Row type="flex" justify="space-between" class="cardreader-list-edit">
      <Form style="width: 100%" class="from" :model="searchObj" label-position="left" inline>
        <Row type="flex" justify="start" inline>
          <Col span="18">
            <Row>
              <!-- <Col>
              </Col>-->

              <FormItem :label-width="72">
                <div slot="label" style="transform: translateX(12px);">门店名称：</div>
                <vueTreeselectChoice

                  @input='handleOrg'
                  @on-api-finish='apiFinish'
                  :clearable='false'
                  permissionCode="moms:report:smartdevicemonitor"
                  v-model="searchObj.orgId"
                ></vueTreeselectChoice>
                <!-- <Select
                  class="select-shop-item"
                  v-model="searchObj.orgId"
                  filterable
                  @on-change="handleOrg"
                  :max-tag-count="1"
                  :max-tag-placeholder="maxTagPlaceholder"
                  style="width:180px"
                >
                  <Option
                    v-for="item in shopList"
                    :value="item.shopId"
                    :key="item.shopId"
                  >{{ item.shopName }}</Option>
                </Select> -->
              </FormItem>

           <FormItem  :label-width="48">
                <div slot="label" style="transform: translateX(12px);">状态：</div>
                <Select @on-change="search" v-model="searchObj.status" style="width:180px">
                  <!-- 异常 3 > 预警 2 > 正常 1 >未绑定 0 -->
                  <Option :value="-1" label="全部">
                    <span>全部</span>
                  </Option>
                  <Option value="1" label="正常">
                    <span>正常</span>
                  </Option>
                  <Option value="2" label="预警">
                    <span>预警</span>
                  </Option>
                  <Option value="3" label="异常">
                    <span>异常</span>
                  </Option>
                  <Option value="4" label="待升级">
                    <span>待升级</span>
                  </Option>
                  <!-- <Option value="0" label="未绑定">
                    <span>未绑定</span>
                  </Option> -->
                  <!-- <Option value="待升级" label="待升级">
                    <span>待升级</span>
                  </Option>-->
                </Select>
                <!-- <Input autocomplete="off" v-model="searchObj.originCardNo" placeholder="请输入" /> -->
              </FormItem>

              <FormItem :label-width="48">
                <div slot="label" style="transform: translateX(12px);">分类：</div>
                <Select
                  @on-change="search"
                  v-model="searchObj.machineCategoryId"
                  style="width:180px"
                >
                  <Option :value="-1" label="全部">
                    <span>全部</span>
                  </Option>
                  <Option
                    v-for="(item, index) in classData"
                    :key="index"
                    :value="item.machineCategoryId"
                    :label="item.name"
                  >
                    <span>{{item.name}}</span>
                  </Option>
                </Select>
                <!-- <Input autocomplete="off" v-model="searchObj.targetCardNo" placeholder="请输入" /> -->
              </FormItem>
              <FormItem>
                <Button type="primary" class="coinrevenue-btn" @click="search">查询</Button>

                <Button style="margin-left: 10px" class="coinrevenue-btn" @click="reset">重置</Button>
              </FormItem>
            </Row>
            <Row>
                            <FormItem v-show="shosMoreSearch" :label-width="60">
                <div slot="label" style="transform: translateX(12px);">关键字：</div>
                <Input

                  :maxlength="20"
                  autocomplete="off"
                  @on-keyup='machineNameChange'
                  v-model="searchObj.machineName"
                  style="width:180px"
                  placeholder="请输入"
                />
              </FormItem>

            </Row>
          </Col>
          <Col span="6">
            <Row type="flex" justify="end" class="code-row-bg">
              <Col>
                <FormItem>
                  <Button
                    style="margin-left: 10px"
                    @click="shosMoreSearch = !shosMoreSearch "
                    class="coinrevenue-btn2 concrete-data"
                  >
                    {{ shosMoreSearch ? '收起筛选' : '更多筛选' }}
                    <Icon :type=" shosMoreSearch? 'ios-arrow-up' : 'ios-arrow-down' " />
                  </Button>
                </FormItem>
              </Col>
            </Row>
          </Col>
        </Row>
      </Form>
    </Row>

    <Row type="flex" justify="start">
      <Col span="20" class="status">
        <span class="padding-right">机台总数：{{statusObj.count}}</span>
        <!-- <span>
          未绑定：
          <i class="status-i">{{statusObj.unbind}}</i>
        </span> -->
        <i class="border"></i>
        <span class="padding-left">
          刷卡器总数：
          <i class="status-i">{{statusObj.swipingCount}}</i>
        </span>

        <span>
          正常：
          <i class="status-i">{{statusObj.normal}}</i>
        </span>

        <span>
          预警：
          <i class="status-i">{{statusObj.warn}}</i>
        </span>

        <span>
          异常：
          <i class="status-i">{{statusObj.error}}</i>
        </span>

        <!-- <span>
          未绑定：
          <i class="status-i">{{statusObj.unbind}}</i>
        </span> -->

        <span>
          待升级：
          <i class="status-i">{{statusObj.oldVersion}}</i>
        </span>

        <i class="border"></i>

        <span class="padding-left">
          <Poptip trigger="hover" width="300" placement='bottom' word-wrap content="提示语">
            <div slot="content">
              <p>门店营业时间在10：00~22：00，机台刷卡器跟采集卡每两分钟上传一次心跳数据，此监控状态根据营业时间区间内上传的心跳数据计算而来，状态如下：</p>
              <p><b>正常：</b>最后上报数据在1小时内的刷卡器数；；</p>
              <p><b>预警：</b>最后上报数据在1~12小时内的刷卡器数；</p>
              <p><b>异常：</b>最后上报数据大于12小时的刷卡器数；</p>
              <!-- <p><b>未绑定机台：</b>投币口未与刷卡器绑定的机台数量；</p> -->

            </div>
            <i class="iconsys iconshuoming"></i> 刷卡器状态说明
          </Poptip>
        </span>
      </Col>

      <Col span="4">
        <Row type="flex" justify="end" style="margin-right: 30px;">
          <Col>
            <!-- <Button type="primary">出卡监控</Button> -->
          </Col>
        </Row>
      </Col>
    </Row>
    <!-- :loading="isloading" -->
    <Table
      @on-sort-change="handleTableSort"
      :loading="isloading"
      stripe
      border
      ref="rowSpanTable"
      :columns="columns"
      :data="resData"
    ></Table>
    <div class="page-box" style="margin-top: 20px">
      <Page
        :total="total"
        ref="pages"
        :current.sync="page.pageIndex"
        :page-size="page.limit"
        @on-change="handlePage"
        @on-page-size-change="handlePageSize"
        show-sizer
        show-total
      />
    </div>

    <Modal width="294" v-model="modalMachineShow" title="机台配置">
      <section class="modalMachine">
        <Row v-for="index in 9" :key="index">
          <Col span="12">
            <Row type="flex" justify="start" class="code-row-bg">
              <Col>固定中奖率</Col>
            </Row>
          </Col>
          <Col span="12">
            <Row type="flex" justify="end" class="code-row-bg">
              <Col>18</Col>
            </Row>
          </Col>
        </Row>
      </section>
      <footer slot="footer">
        <Button @click=" modalMachineShow = false">取消</Button>
        <Button type="primary">导出</Button>
      </footer>
    </Modal>
  </div>
</template>
<script>
// import { rowSpanTable, formatRowspanData } from '@/libs/rowspan'
import { cardreaderList, cardreaderStatus, cardreaderclassify } from '@/api/report/hardware'
import vueTreeselectChoice from '@/components/vue-treeselect-choice'
// import dayjs from 'dayjs'
import errorCaptured from '@/libs/errorCaptured'
export default {
  name: 'report_hardware_cardreader',
  components: {
    vueTreeselectChoice
  },
  data () {
    return {
      shopList: [],
      total: 0,
      isloading: false,
      bottonActive: '日',
      page: {
        // 分页控制
        offset: 0,
        limit: 10,
        pageIndex: 1
      },
      searchObj: {
        machineName: '', // 关键字
        orgId: undefined, // 'e4ef2e0a-0c51-4023-8aaa-487b40493464' ||
        machineCategoryId: -1, // 分类
        status: -1, // 转态
        merchantId: this.$store.state.user.merchantId, // 'dwj' ||
        versionOrder: '',
        timeOrder: ''
      },
      statusObj: {
        normal: 0, // 正常
        count: 0, // 机台数量
        warn: 0, // 报警
        error: 0, // 异常
        unbind: 0, //  未绑定
        oldVersion: 0, // 未升级
        swipingCount: 0 // 刷卡器数量
      }, // 显示状态的值
      shosMoreSearch: true,
      model10: [],
      columns: [
        { type: 'index', width: 80, align: 'center', fixed: 'left', title: '序号' },
        { title: '门店名称', key: 'shopName', align: 'center', fixed: 'left' },
        { title: '机台分类', key: 'categoryName', align: 'center' },
        { title: '机台名称', key: 'machineName', align: 'center' },
        { title: '编号', key: 'machineNo', align: 'center' },
        // { title: '游戏位', key: 'code', align: 'center' },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          render: (h, params) => {
            return h('span', { 0: '未绑定', 1: '正常', 2: '预警', 3: '异常', 4: '待升级' }[params.row.status])
          }
        },
        {
          title: '绑定刷卡器',
          key: 'mac',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.mac ? '是' : '否')
          }
        },
        { title: '版本号',
          key: 'ic1',
          sortable: 'custom',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.ic1 ? params.row.ic1 : 'N/A')
          }
        },

        { title: '统计时间', sortable: 'custom', key: 'time', align: 'center' }
        // { title: '每局币数', key: 'count', align: 'center' },
        // {
        //   title: '机台配置',
        //   key: 'action',
        //   align: 'center',
        //   render: (h, params) => {
        //     return h('div', [
        //       h('i', {
        //         class: ['iconsys', 'icondetail'],
        //         on: {
        //           click: () => {
        //             this.modalMachineShow = true
        //           }
        //         }
        //       })
        //     ])
        //   }
        // }
      ],
      resData: [],
      classData: [], // 几天分类数据
      // 机台配置数据
      modalMachineData: [{ key: 'fixation', title: '固定中奖率', value: '18' }],
      modalMachineShow: false,
      modalMachineSolumns: [
        { title: '门店名称', key: 'createPosName', align: 'center' },
        { title: '机台分类', key: 'machineCategoryId', align: 'center' }
      ],
      isId: false
    }
  },

  async created () {
    // this.cardreaderStatus()
    // this.cardreaderList()
    this.cardreaderclassify()
    // this.cardreaderList()
  },
  mounted () {
  },
  methods: {
    apiFinish (isId) {
      this.isId = isId
      if (isId) this.searchObj.orgId = this.$store.state.user.orgId
    },
    machineNameChange () {
      this.searchObj.machineName = this.searchObj.machineName.replace(/\s+/g, '')
      // console.log(event.target.value)
      // this.searchObj.machineName = event.target.value.replace( /\s+/g , '')
    },
    handlePage (val) {
      this.page.offset = (val - 1) * this.page.limit
      this.page.pageIndex = val
      this.cardreaderStatus(true)
    },
    handlePageSize (val) {
      this.page.limit = val
      this.page.offset = 0
      this.page.pageIndex = 1
      this.cardreaderStatus(true)
    },

    // 获取机台分类
    async cardreaderclassify () {
      let [err, res] = await errorCaptured(cardreaderclassify, { merchantId: this.searchObj.merchantId })
      if (err) return null
      if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
      this.classData = res.data.data
    },
    async cardreaderStatus (list) { // list Boole 是否要在这个接口请求完成后请求列表接口
      let params = {
        merchantId: this.searchObj.merchantId,
        orgId: this.searchObj.orgId || this.$store.state.user.orgId
      }
      let [err, res] = await errorCaptured(cardreaderStatus, params)

      if (err) return null
      if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
      let obj = {
        normal: 0, // 正常
        count: 0, // 机台数量
        warn: 0, // 报警
        error: 0, // 异常
        unbind: 0, //  未绑定

        oldVersion: 0, // 未升级
        swipingCount: 0 // 刷卡器数量
      }
      // 刷卡器统计 swipingCount

      res.data.data &&
        res.data.data.swipingStatistics &&
        res.data.data.swipingStatistics.forEach(element => {
          obj.swipingCount += element.oldVersion + element.newVersion + element.invalidVersion
          obj.oldVersion += element.oldVersion
        })
      // 机台统计
      res.data.data &&
        res.data.data.machineStatistics.forEach(item => {
          obj.normal += item.normal
          obj.count += item.count
          obj.error += item.error
          obj.warn += item.warn
          obj.unbind += item.unbind
        })
      this.statusObj = obj
      if (list) this.cardreaderList()
    },
    async cardreaderList () {
      let params = {
        // merchantId: this.$store.state.user.merchantId,
        ...this.searchObj,
        ...this.page,
        machineCategoryId: this.searchObj.machineCategoryId === -1 ? null : this.searchObj.machineCategoryId,
        status: this.searchObj.status === -1 ? null : this.searchObj.status,
        orgId: this.searchObj.orgId || this.$store.state.user.orgId
        // orgId: 'e4ef2e0a-0c51-4023-8aaa-487b40493464'
      }
      this.isloading = true
      let [err, res] = await errorCaptured(cardreaderList, params)
      this.isloading = false
      if (err) return null
      if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
      this.resData = res.data.data || []
      this.total = res.data.totalCount
    },

    search () {
      // this.page.limit = 10
      this.page.offset = 0
      this.page.pageIndex = 1
      // this.cardreaderStatus()
      this.cardreaderStatus(true)
    },
    // 改变门店
    handleOrg (value) {
      // this.page.limit = 10
      this.page.offset = 0
      this.page.pageIndex = 1
      this.cardreaderStatus(true)
      // this.cardreaderList()
    },
    reset () {
      this.searchObj = {
        machineName: '', // 关键字
        orgId: this.isId ? this.$store.state.user.orgId : null,
        machineCategoryId: -1, // 分类
        status: -1, // 转态
        versionOrder: '',
        timeOrder: '',
        merchantId: this.$store.state.user.merchantId // 'dwj' ||
      }

      // this.page.limit = 10
      this.page.offset = 0
      this.page.pageIndex = 1
      // this.cardreaderList()
      this.cardreaderStatus(true)
    },
    // 表格排序
    handleTableSort ({ column, key, order } = data) {
      if (key === 'version') {
        this.searchObj[`${key}Order`] = order === 'normal' ? '' : order
        this.searchObj.timeOrder = ''
      } else {
        this.searchObj[`${key}Order`] = order === 'normal' ? '' : order
        this.searchObj.versionOrder = ''
      }

      this.cardreaderStatus(true)
    }
  }
}
</script>
<style lang="less" scoped>
.cardreader-list {
  min-width: 1100px;
  // .from {
  //   margin-top: 24px;
  // }
  .cardreader-list-edit {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: -4px;
  }
  .button_active {
    border: 1px solid #2d8cf0;
  }
  .status {
    height: 52px;
    line-height: 32px;

    font-size: 12px;
    color: #464c5b;
    letter-spacing: 0;
    text-align: justify;
    display: flex;
    padding: 0 10px 10px 20px;
    font-style: normal;
    span {
      // padding: 0 10px;
      padding-left: 10px;
      padding-right: 10px;
      display: flex;
      align-items: center;
      font-style: normal;
    }
    .padding-left {
      padding-left: 20px;
    }
    .padding-right {
      padding-right: 20px;
    }
    .border {
      border-left: 1px solid #979797;
      height: 16px;
      align-self: center;
    }
    .status-i {
      height: 20px;
      padding: 0 10px;
      display: block;
      background: #ffffff;
      // border: 1px solid #2d8cf0;
      border-radius: 10px;
      line-height: 20px;
      font-style: normal;
    }
    .iconshuoming {
      color: orange;
      margin-right: 3px;
    }
  }
}
.modalMachine {
  padding: 0 20px;
}
</style>
